<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-preload.js"></script>
    <script src="../dist/plugin-html-keyboard-response.js"></script>
    <script src="../dist/plugin-image-keyboard-response.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    // create the list of images that should be preloaded
    var images_to_preload = [
      'img/happy_face_1.jpg',
      'img/happy_face_2.jpg',
      'img/happy_face_3.jpg',
      'img/happy_face_4.jpg',
      'img/sad_face_1.jpg',
      'img/sad_face_2.jpg',
      'img/sad_face_3.jpg',
      'img/sad_face_4.jpg'
    ];

    var preload_trial = {
      type: jsPsychPreload,
      images: images_to_preload // preload the list of images
    };

    var pre_trial = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: '<p>If you check the Network tab in your browser&rsquo;s developer tools,<br>you should see that 8 images have been loaded into memory.</p>'+
        '<p>The next trial uses the image-keyboard-response plugin.<br>This plugin automatically preloads the image when an image file name is used for the stimulus parameter.</p>'+
        '<p>However, in this case the stimulus parameter is a <em>function</em> that randomly selects an image to display.<br>'+
        'We therefore need to manually preload the images.</p>'+
        '<p>The image that is randomly selected and displayed in the next trial should not load again in the Network tab when the trial starts.</p>'+
        '<p>Press any key to continue.</p>'
    };

    var trial = {
      type: jsPsychImageKeyboardResponse,
      stimulus: function() {
        return jsPsych.randomization.sampleWithoutReplacement(images_to_preload, 1)[0];
      },
      choices: ['y','n'],
      prompt: '<p>Have you seen this face before? Press y or n.</p>',
      stimulus_width: 300
    };
    
    jsPsych.run([preload_trial, pre_trial, trial]);

  </script>
</html>
